<template>
  <el-dialog
    title="新增员工"
    :visible="visible"
    width="50%"
    @close="closeDialog">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="visible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      visible: this.dialogVisible
    }
  },
  watch: {
    dialogVisible(newVal) {
      this.visible = newVal
    }
  },
  methods: {
    // 点击 x 和蒙板会触发的回调函数
    closeDialog() {
      // 触发自定义事件，通知父组件去修改 dialogVisible 的值
      this.visible = false
    }
  }
}
</script>

<style>

</style>